import React, { useState } from 'react'
import Avatars from '../../../component/avatars'
import { Button, Table, Modal } from 'antd'
import { useSelector } from 'react-redux'
import { UserIcon } from '../../../utils/icons';

export default function Closing() {
    const languages = useSelector((state) => state.publicReducer.language)
    const username = useSelector((state) => state.userReducer.user.username)
    const data = [
        {
            key: '1',
            기간: '2022년 11월',
            My수익: '2,142,355',
            공제액: '5,000',
            최종금액: '2,137,355',
            정산완료일: "2022-11-02",
        },
        {
            key: '2',
            기간: '2022년 10월',
            My수익: '2,142,355',
            공제액: '5,000',
            최종금액: '2,137,355',
            정산완료일: "2022-10-20",
        },
        {
            key: '3',
            기간: '2022년 9월',
            My수익: '2,142,355',
            공제액: '5,000',
            최종금액: '2,137,355',
            정산완료일: "2022-9-02",
        },
        {
            key: '4',
            기간: '2022년 8월',
            My수익: '2,142,355',
            공제액: '5,000',
            최종금액: '2,137,355',
            정산완료일: "2022-8-02",
        },
        {
            key: '5',
            기간: '2022년 7월',
            My수익: '2,142,355',
            공제액: '5,000',
            최종금액: '2,137,355',
            정산완료일: "2022-7-02",
        },
    ]
    const columns = [
        {
            title: languages === "Korean" ? "기간" : (languages === "Chinese" ? "日期" : "Period"),
            key: '기간',
            dataIndex: '기간',
            align: "center",
        },
        {
            title: languages === "Korean" ? "My수익" : (languages === "Chinese" ? "我的收益" : "My profit"),
            dataIndex: 'My수익',
            key: 'My수익',
            align: "center",
            render: (row) => "₩" + row
        },
        {
            title: languages === "Korean" ? "공제액" : (languages === "Chinese" ? "扣除金额" : "Deduction"),
            dataIndex: '공제액',
            key: '공제액',
            align: "center",
            render: (row) => "₩" + row
        },
        {
            title: languages === "Korean" ? "최종금액" : (languages === "Chinese" ? "最终金额" : "Final amount"),
            dataIndex: '최종금액',
            key: '최종금액',
            align: "center",
            render: (row) => "₩" + row
        },
        {
            title: languages === "Korean" ? "정산 완료일" : (languages === "Chinese" ? "结算完成日期" : "Closing complete date"),
            dataIndex: '정산완료일',
            key: '정산완료일',
            align: "center",
            render: (row) => row.split("-")[2] >= "20" ? <Button onClick={() => setIsModalOpen(true)}>{languages === "Korean" ? "포인트 전환" : (languages === "Chinese" ? "转换积分" : "Convert to points")}</Button> : row
        },
    ]

    const [isModalOpen, setIsModalOpen] = useState(false)
    const handleCancel = () => {
        setIsModalOpen(false)
    }
    const handleOk = () => {
        setIsModalOpen(false)
    }
    return (
        <div className='closing'>
            <div><Avatars username={username} level="Lv.99" coupon={languages === "Korean" ? "쿠폰 잔액" : (languages === "Chinese" ? "可用优惠券" : "Coupon Balance")} balance="8,888,888" icon={<UserIcon />} /></div>
            <div className='main'>
                <Table size='small' columns={columns} dataSource={data} pagination={false} />

                <Modal className='closing_modal' title={languages === "Korean" ? "포인트 전환" : (languages === "Chinese" ? "转换积分" : "Convert to points")} open={isModalOpen} onCancel={handleCancel} onOk={handleOk} footer={null} centered>
                    <figure>₩9,999,99</figure>
                    <figcaption>{languages === "Korean" ? "위 금액을 포인트로 전환합니다." : (languages === "Chinese" ? "将上述金额转换为积分" : "Convert the above amount into points.")}</figcaption>
                    <Button onClick={handleCancel}>{languages === "Korean" ? "취소" : (languages === "Chinese" ? "取消" : "Cancel")}</Button>
                    <Button onClick={handleOk}>{languages === "Korean" ? "확인" : (languages === "Chinese" ? "确认" : "OK")}</Button>
                </Modal>
            </div>
        </div>
    )
}
